<template>
    <div>
        <h2><slot></slot></h2>
        <div class="box1">
            <router-link class="box22" :to="{path:'/courseDetail',query:{courseId:item.courseId}}" tag="div" v-for="(item) in courseList" :key="item.courseId">
                <div class="course">
                    <ul class=.hand>
                        <li class="bianDa">
                            <img :src="item.coverFileUrl" alt="" />
                        </li>
                        <li class="yincang" :title="title">{{item.courseTitle}}</li>
                        <li class="gray">{{item.participationsCount}} 节课 | {{item.learningNum}} 人报名</li>
                        <li class="mianfei" v-if="item.isFree=='1'" style="color: rgb(0,207,140);">免费</li>
                        <li v-else>
                            <span style="color: red; font-size: 16px;">&yen;{{item.discountPrice}}</span>
                            &nbsp;&nbsp;<span style="color: gray; text-decoration: line-through; font-size: 12px;">&yen;{{item.coursePrice}}</span>
                            <span v-if="item.discountDesc!=undefined" style="color: #fa8c16; background: #fff7e6;border:1px solid #ffd591; float: right; font-size: 12px; padding: 5px;">{{item.discountDesc}}</span>
                            <div v-else style="clear: both;"></div>
                        </li>
                    </ul>
                </div>

            </router-link>
        </div>

<!--        <div v-for="(item) in courseList" :key="item.courseId">-->
<!--            {{item.courseTitle}}-->
<!--        </div>-->
    </div>
</template>

<script>
    export default {
        name: "CourseList",
        data(){
            return{
                courseList:[],
                title:""
            }
        },
        props:{
            type:{
                type:[String,Number],
                default:"free"
            },
            pageNum:{
              type:[String,Number],
              default:1
            },
            pageSize:{
                type:[String,Number],
                default: 5
            }
        },
        created() {
            let lieBiao = new URLSearchParams()
            lieBiao.append('type',this.type)
            lieBiao.append('pageNum',this.pageNum)
            lieBiao.append('pageSize',this.pageSize)
            this.$axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type",lieBiao).then((res)=>{
                console.log(res)
                this.title = res.data.rows.courseTitle
                this.courseList = res.data.rows
            })
        },


    }
//    tabs切換

</script>

<style scoped>
    li{
        list-style: none;
    }
    .box1 {
        width: 1100px;
        margin: auto;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .course {
        height: 200px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .course img:hover{
        transform: scale(1.1,1.1);
    }
    .course img {
        width: 100%;
        height: 120px;
        transform: none;
        transition-duration: 0.6s;
    }
    .bianDa{
        width: 210px;
        height: 120px;
        overflow: hidden;
    }
    .box22{
        width: 20%;
    }
    h2{
        margin: 20px auto;
        padding-bottom: 10px;
        width: 1150px;
        border-bottom: 1px solid gainsboro;
        text-align: center;
    }
    .hand:hover{
        cursor: pointer;
    }
    .hand:nth-child(1){
        transition: color 0.3s;
    }
    .hand:nth-child(1):hover{
        color: #00cf8c;
    }
    .hand:nth-child(1),.hand:nth-child(2){
        display: block;
        font-size: 12px;
    }
    .mianfei{
        font-size: 14px;
    }
    .hand:nth-child(1):hover{
        color: #00cf8c;
    }
    .gray {
        color: gray;
    }
    .yincang{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
</style>